<template>
	<section class="chooseFloor">
		<p class="chooseFloor_p">选择楼层
			<span @click="chooseFloor(item)" v-for="(item,index) in floors" :class="{'choose':currentFloor===item}">
				{{item}}楼
			</span>
		</p>

		<div class="floorImg">
			<img src="../assets/20180923131815.png"/>

		</div>
		<p v-if="currentFloor!=0" class="titlepricetop">你已经选择了{{currentFloor}}楼的0515房间</p>
		<p v-if="currentFloor!=0" style="margin-top:1px;">总费用<span style="color:red; margin-left:30px; font-size:30px;">￥{{currentFloor}}89</span></p>
	</section>
</template>

<script>
	export default{

		data(){
			return{
				floors:[5,6,7,8],
				currentFloor:0,
			}
		},
		mounted(){

		},
		methods:{
			chooseFloor(val){/*选择楼层*/
				this.currentFloor = val;
			}
		}
	}
</script>

<style scoped="scoped">
    .titlepricetop{
        text-align: left;
        margin-left: 20%;
        color: #666;
        margin-top: 20px;
    }
	.chooseFloor{
		width: 1000px;
	}
	.chooseFloor_p{
		margin: 20px 0;
   		border-bottom: solid 1px #d7d5d5;
   		    padding-bottom: 10px;
   		    color: #979494;
	}
	.chooseFloor_p span{
		margin-left: 40px;
		  color: #4b4a4a;
		  cursor: pointer;
	}
	.chooseFloor_p span.choose{
		  color:rgb(214,114,2);
	}
	.floorImg{
		width: 800px;
		height: 430px;
		margin: 0 auto;
	}
</style>
